<template>
  <div class="login-container"
       @keyup.enter.native="handleLogin">
    <div class="login-weaper animated bounceInDown">
      <div class="login-left">
        <img class="img"
             src="/img/logo.png"
             alt="">
        <p class="title">{{website.infoTitle}}</p>
        <p>©2019 v2.3.1</p>
      </div>
      <div class="login-border">
        <div class="login-main">
          <userLogin v-if="activeName==='user'"></userLogin>
          <codeLogin v-else-if="activeName==='code'"></codeLogin>
          <thirdLogin v-else-if="activeName==='third'"></thirdLogin>
          <div class="login-menu">
            <a href="#"
               @click.stop="activeName='user'">账号密码</a>
            <a href="#"
               @click.stop="activeName='code'">手机号登录</a>
            <a href="#"
               @click.stop="activeName='third'">第三方登录</a>
          </div>
        </div>
      </div>
      <div class="data-form">
        <el-form ref="socialForm" :model="socialForm" v-show="false">
          <el-form-item>
            <el-input v-model="socialForm.providerId"></el-input>
            <el-input v-model="socialForm.state"></el-input>
            <el-input v-model="socialForm.code"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
  import '@/styles/login.scss'
  import userLogin from "./userlogin";
  import codeLogin from "./codelogin";
  import thirdLogin from "./thirdlogin";
  import {mapGetters} from "vuex";
  import {getStore, setStore} from "@/util/store";
  import {dateFormat} from "@/util/date";
  import {validatenull} from "@/util/validate";
  import {Message} from 'element-ui'
  export default {
    name: "login",
    components: {
      userLogin,
      codeLogin,
      thirdLogin
    },
    data() {
      return {
        activeName: "user",
        socialForm:{
          providerId:"",
          state:"",
          code:"",
          username:"",
          password:""
        },
        dialogVisible:false,
        passwordType:"password",
        passValidate:true, //跳过验证
      };
    },
    watch: {
      '$route'(to,from){
        const params = this.$route.query;
        console.log(params);
        if (!validatenull(params.state)) {
          this.socialForm.state = params.state;
          this.socialForm.code = params.code;
          this.socialForm.providerId = params.providerId;
          if(validatenull(this.socialForm.providerId)){
            Message({
              message:"不支持的第三方登陆",
              type:"error"
            });
            return;
          }
          this.handleLogin();
        }
      }
    },
    created() {
    },
    mounted() {
    },
    computed: {
      ...mapGetters(["website","tagWel"])
    },
    props: [],
    methods: {
      handleLogin(){
        let loading = this.$loading({
          lock: true,
          text: `${this.socialForm.state === 'WECHAT' ? '微信' : this.socialForm.state === 'QQ'?'QQ':'微博'}登录中,请稍后。。。`,
          spinner: 'el-icon-loading'
        });
        //登录
        this.$store.dispatch("LoginByThird", this.socialForm).then(() => {
          //登录跳至首页
          loading.close();
          this.$router.push({ path: this.tagWel.value });
        }).catch(()=>{
          loading.close();
        })
      }
    }
  };
</script>

